<!-- templates/admin_comments.html -->
{% extends "layout.html" %}

{% block extra_css %}
<style>
    /* 评论审核管理页面样式 */
    .admin-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .admin-container h2 {
        color: #333;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .filter-bar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .filter-group label {
        font-weight: 600;
        margin-bottom: 0;
    }

    .comments-list {
        margin-top: 20px;
    }

    .comment-card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        transition: all 0.3s ease;
        background-color: #fff;
    }

    .comment-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .user-info {
        font-weight: 600;
        color: #333;
    }

    .timestamp {
        color: #6c757d;
        font-size: 0.9em;
    }

    .status-badge {
        font-size: 0.8em;
        padding: 4px 8px;
        border-radius: 12px;
    }

    .comment-content {
        margin: 15px 0;
        line-height: 1.6;
        color: #444;
    }

    .comment-meta {
        display: flex;
        gap: 15px;
        font-size: 0.85em;
        color: #6c757d;
        margin-top: 10px;
    }

    .comment-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        justify-content: flex-end;
    }

    .approve-btn, .reject-btn {
        min-width: 80px;
    }

    .no-comments {
        text-align: center;
        padding: 40px;
        color: #6c757d;
        font-size: 1.1em;
        background-color: #f8f9fa;
        border-radius: 8px;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .filter-bar {
            flex-direction: column;
            gap: 10px;
        }

        .comment-header {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container admin-container">
    <h2>评论审核管理</h2>

    <div class="filter-bar">
        <div class="filter-group">
            <label>状态筛选：</label>
            <select id="statusFilter" class="form-select">
                <option value="all">全部</option>
                <option value="pending">待审核</option>
                <option value="approved">已通过</option>
                <option value="rejected">已拒绝</option>
            </select>
        </div>
    </div>

    <div class="comments-list">
        {% for comment in comments %}
        <div class="comment-card" data-status="{{ comment.status }}">
            <div class="comment-header">
                <span class="user-info">{{ comment.user }}</span>
                <span class="timestamp">{{ comment.timestamp }}</span>
                <span class="status-badge badge
                    {% if comment.status == 'pending' %}bg-warning
                    {% elif comment.status == 'approved' %}bg-success
                    {% else %}bg-danger{% endif %}">
                    {% if comment.status == 'pending' %}待审核
                    {% elif comment.status == 'approved' %}已通过
                    {% else %}已拒绝{% endif %}
                </span>
            </div>

            <div class="comment-content">
                {{ comment.content | safe }}
            </div>

            <div class="comment-meta">
                <span>路线ID: {{ comment.hike_id }}</span>
                <span>评论ID: {{ comment.id }}</span>
            </div>

            {% if comment.status == 'pending' %}
            <div class="comment-actions">
                <button class="btn btn-success btn-sm approve-btn"
                        data-comment-id="{{ comment.id }}">通过
                </button>
                <button class="btn btn-danger btn-sm reject-btn"
                        data-comment-id="{{ comment.id }}">拒绝
                </button>
            </div>
            {% endif %}
        </div>
        {% else %}
        <div class="no-comments">暂无评论需要审核</div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 状态筛选功能
        document.getElementById('statusFilter').addEventListener('change', function() {
            const status = this.value;
            const commentCards = document.querySelectorAll('.comment-card');

            commentCards.forEach(card => {
                if (status === 'all' || card.dataset.status === status) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // 审核操作处理
        document.querySelectorAll('.approve-btn, .reject-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            // 确保获取到commentId
            const commentId = this.getAttribute('data-comment-id');

            if (!commentId || isNaN(commentId)) {
                console.error('无效的评论ID:', commentId);
                alert('操作失败: 无效的评论ID');
                return;
            }

            const action = this.classList.contains('approve-btn') ? 'approve' : 'reject';
            const url = `/admin/comment/${commentId}/${action}`;

            console.log('准备发送请求到:', url); // 调试用

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('操作失败: ' + (data.message || '未知错误'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('请求失败: ' + error.message);
            });
        });
    });
    });
</script>
{% endblock %}